<template>
	<div class="order">
		<div class="condition">
			<span v-for="(item,index) in orderStatusDict"
			:key="index"
			@click="changeOrderStatus(item.payStatus)"
			:class="item.isActive?'is-active':''"
			>
			{{ item.payName }}
			</span>
		</div>
		<table>
			<tr class="table-header">
				<th>订单详情</th>
				<th>收货人</th>
				<th>金额</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<tbody class="order-info" v-for="(item,index) in goodsInfo" :key="index">
				<tr class="blank-tr"></tr>
				<tr class="info-header">
					<td class="order-num">
						<span>{{ item.create_time.replace("T","").replace("Z","") }}</span>
						<span>订单号：</span>
						<b>{{ item.trade_no }}</b>
					</td>
					<td colspan="4" class="img-td">
						<el-popconfirm
							width="220"
						    confirm-button-text="确定"
						    cancel-button-text="不,谢谢"
						    title="确定删除这个订单吗"
							@confirm="deleteOrder(item.trade_no)"
						  >
						    <template #reference>
						      <span class="iconfont icon-lajixiang cs"></span>
						    </template>
						  </el-popconfirm>
					</td>
				</tr>
				<tr class="info-detail" v-for="(data,key) in item.order_info" :key="index">
					<td class="goods-datail clearfix">
						<a href='#' target="_blank">
							<img :src="data.photo_URL" alt="" class="fl"/>
							<div class="fl">
								<span class="dian2">{{ data.name }}</span>
							</div>
						</a>
						<div class="goods-num fl">
							x{{ data.num }}
						</div>
					</td>
					<td :rowspan="item.order_info.length" v-if="key<1">{{ item.email }}</td>
					<td :rowspan="item.order_info.length" v-if="key<1">{{ item.total_price }}</td>
					<td :rowspan="item.order_info.length" v-if="key<1">{{ switchStatus(item.pay_status)[0] }}</td>
					<td :rowspan="item.order_info.length" v-if="key<1">
						<span class="order-action">
							{{ switchStatus(item.pay_status)[1] }}
						</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getAllOrders } from '@/network/order.js';
	let goodsInfo = ref()
	
	const getAllOrderInfo=(data)=>{
		getAllOrders(data).then( (res) => {
			goodsInfo.value = res.data;
			// console.log(goodsInfo.value)
			console.log(res.data)
		} ).catch( (err) => {
			console.log(err)
		} )
	}
	
	onMounted( () => {
		getAllOrderInfo(-1);
	} )
	
	const orderStatusDict = ref([
		{
			payStatus:-1,
			payName:"全部订单",
			isActive:true,
		},
		{
			payStatus:-0,
			payName:"待确认",
			isActive:false,
		},
		{
			payStatus:1,
			payName:"待付款",
			isActive:false,
		},
		{
			payStatus:2,
			payName:"待收货",
			isActive:false,
		},
		{
			payStatus:3,
			payName:"已完成",
			isActive:false,
		},
	])
	
	const changeOrderStatus = (orderStatus) => {
		
	}
	
	const deleteOrder = (tradeNo) => {
		
	}
	
	const switchStatus=(payStatus)=>{
		const orderStatus = reactive({
			0:['待确认','确认订单'],
			1:['待付款','支付订单'],
			2:['待收货','确认收货'],
			3:['已完成','再次购买'],
		})
		return orderStatus[payStatus]
	}
	
</script>

<style lang="less" scoped>
	.order{
		background-color: white;
		padding: 10px;
		.condition{
			span{
				margin-right: 20px;
				&:hover{
					cursor: pointer;
					color: #e2231a;
				}
			}
			.is-active{
				color: #e2231a;
				font-weight: 700;
				border-bottom: 2px solid #e2231a;
			}
		}
		table{
			margin-top: 20px;
			width: 650px;
			border-collapse: collapse;
			.table-header{
				border: 1px solid #e5e5e5;
				background-color: #f5f5f5;
				height: 35px;
				th:first-child{
					width: 500px;
				}
				th:not(:first-child){
					width: 100px;
				}
			}
			.order-info{
				// border: 1px solid #e5e5e5;
				.blank-tr{
					height: 20px;
				}
				.info-header{
					border: 1px solid #e5e5e5;
					background-color: #f5f5f5;
					height: 30px;
					color: #aaa;
					.order-num{
						span{
							margin-left: 30px;
						}
						b{
							color: #333;
						}
					}
					.img-td{
						text-align: right;
						padding-right: 30px;
						>span{
							&:hover{
								cursor: pointer;
								color: #e2231a;
							}
						}
					}
				}
				.info-detail{
					border: 1px solid #e5e5e5;
					.goods-datail{
						border: 1px solid #e5e5e5;
						a{
							img{
								width: 60px;
								height: 60px;
								margin-left: 10px;
							}
							div{
								width: 250px;
								text-align: center;
								margin-left: 10px;
								
								span{
									height: 60px;
									line-height: 60px;
								}
							}
						}
						.goods-num{
							height: 60px;
							line-height: 60px;
						}
					}
					td{
						text-align: center;
						border: 1px solid #e5e5e5;
					}
					.order-action{
						display: inline-block;
						border: 1px solid #ddd;
						background-color: #f5f5f5;
						width: 50px;
						height: 25px;
						text-align: center;
						line-height: 25px;
						&:hover{
							cursor: pointer;
							border: 1px solid #e2231a;
							color: #e2231a;
						}
					}
				}
			}
		}
	}
</style>